<template>
<view>
<template name="loan">
  <form @submit="calculationLoan" @reset="resetLoan">
    <view class="body">
      <view class="list">
        <view class="title">是否三年内未提取</view>
        <view class="right">
          <picker name="threeYearsUnextracted" @change="unextractedYears" mode="selector" :range="booleanType">
            <text class="value">{{booleanType[unextractedIndex]}}</text>
          </picker>
          <image src="/static/images/sys/right.png" class="list-arrow"></image>
        </view>
      </view>
      <view class="list">
        <view class="title">是否有共同申请人</view>
        <view class="right">
          <picker name="jointApplicant" @change="jointApplicant" mode="selector" :range="booleanType">
            <text class="value">{{booleanType[jointApplicantIndex]}}</text>
          </picker>
          <image src="/static/images/sys/right.png" class="list-arrow"></image>
        </view>
      </view>
    </view>
    <view class="border">
      <view class="list">
        <view class="title">公积金余额</view>
        <view class="right">
          <input name="balance" placeholder="请输入公积金余额" placeholder-class="input-placeholder" type="number">
        </view>
      </view>
      <view class="list" v-if="jointApplicantIndex == 0">
        <view class="title">配偶公积金余额</view>
        <view class="right">
          <input name="spouseBalance" placeholder="请输入配偶公积金余额" placeholder-class="input-placeholder" type="number">
        </view>
      </view>
    </view>
    <view class="control-group">
      <button form-type="reset" class="reset" hover-class="btn">清空</button>
      <button form-type="submit" class="submit" hover-class="btn">开始计算</button>
    </view>
  </form>
  <view class="loan-result">
    <view class="rseult-border">
      <view class="result-title">可贷款总额（元）</view>
      <view class="number">{{result}}</view>
    </view>
    <view class="desc">结果仅供参考，最终结果以正式审批为准。</view>
  </view>
</template>
<template name="pay">
  <form @submit="calculationPay" @reset="resetPay">
    <view class="pay body">
      <view class="list">
        <view class="title">缴存基数</view>
        <view class="right">
          <input name="base" placeholder="2200-27927" placeholder-class="input-placeholder" type="number">
          <text class="company">元</text>
        </view>
      </view>
      <view class="list">
        <view class="title">缴存比例</view>
        <view class="right">
          <input name="proportion" placeholder="5-12" placeholder-class="input-placeholder" type="number">
          <text class="company">%</text>
        </view>
      </view>
    </view>
    <view class="control-group">
      <button form-type="reset" class="reset" hover-class="btn">清空</button>
      <button form-type="submit" class="submit" hover-class="btn">开始计算</button>
    </view>
    <view class="pay-result loan-result">
      <view class="rseult-border">
        <view class="pay-number-result">{{result}}</view>
        <view class="result-title">缴纳总额（元）</view>
        <view class="detail">
          <view class="self">
            <text class="pay-number">{{self}}</text>
            <text class="pay-desc">个人缴纳（元）</text>
          </view>
          <view class="comp">
            <text class="pay-number">{{comp}}</text>
            <text class="pay-desc">单位缴纳（元）</text>
          </view>
        </view>
      </view>
      <view class="desc">结果仅供参考，最终结果以正式审批为准。</view>
    </view>
  </form>
</template>
<template name="donorRoom">
  <form @submit="complateDonorRoom">
    <view class="list type" style="padding: 24rpx 40rpx">
      <view class="title">计算方式</view>
      <view class="right">
        <picker name="jointApplicant" @change="complateType" mode="selector" :range="complateType">
          <text class="value">{{complateType[complateIndex]}}</text>
        </picker>
        <image src="/static/images/sys/right.png" class="list-arrow"></image>
      </view>
    </view>
    <view class="border">
      <view class="list">
        <view class="title">
          <text>贷款金额</text>
          <image src="/static/images/sys/tips@2x.png" class="tips" @tap="showtapsNum"></image>
          <image src="/static/images/sys/tipsImgNum.png" class="tips-content" v-if="showNum" mode="aspectFit"></image>
        </view>
        <view class="right">
          <input name="loanTotal" placeholder="0-90" placeholder-class="input-placeholder" type="number">
          <text class="company">万</text>
        </view>
      </view>
      <view class="list">
        <view class="title">
          <text>贷款年限</text>
          <image src="/static/images/sys/tips@2x.png" class="tips" @tap="showtapsYear"></image>
          <image src="/static/images/sys/tipsImgYear.png" class="tips-content" v-if="showYear" mode="aspectFit"></image>
        </view>
        <view class="right">
          <input name="year" placeholder="0-30" placeholder-class="input-placeholder" type="number">
          <text class="company">年</text>
        </view>
      </view>
    </view>
    <view class="control-group">
      <button form-type="reset" class="reset" hover-class="btn">清空</button>
      <button form-type="submit" class="submit" hover-class="btn">开始计算</button>
    </view>
  </form>
</template>
</view>
</template>

<style>

.pay-body {
    color: #232323;
}
.company {
    margin-left: 16rpx;
    margin-bottom: 6rpx;
    color: #7E7E7E;
    font-size: 28rpx;
}
.result-title {
    font-size: 28rpx;

}
.detail {
    display: flex;
    justify-content: space-around;
    margin-top: 46rpx;
}
.pay-number-result {
    font-size: 50rpx;
    font-weight: bold;
}
.self, .comp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.comp {
    border-left: 2rpx solid #E7E7E7;
    padding-left: 56rpx;
}
.pay-number {
    font-size: 32rpx;
    font-weight: bold;
}
.pay-desc {
    margin-left: 6rpx;
    margin-top: 0;
    font-size: 20rpx;
    color: #7E7E7E;
}
.type {
    background-color: #ffffff;
    padding: 0 40rpx;
}
.tips {
    width: 26rpx;
    height: 26rpx;
    padding-left: 14rpx;
    padding-top: 4rpx;
    padding-right: 14rpx;
}
.tips-content {
    position: absolute;
    top: 83%;
    left: 70%;
    z-index: 999;
    width: 322rpx;
    height: 118rpx;
}
</style>